<template>
  <div class="big-page">
    <page-header menu="home"></page-header>
    <div class="home-layout">
      <div class="column">
        <div class="column-row">
          <common-chart :chart-type="'bar'" size="small" :data="chart1"></common-chart>
        </div>
        <div class="column-row">
          <common-chart :chart-type="'bar'" size="small" :data="chart3"></common-chart>
        </div>
      </div>
      <div class="column">
        <div class="column-row">
          <common-chart :chart-type="'pie'" size="small" :data="chart5"></common-chart>
        </div>
        <div class="column-row">
          <common-chart :chart-type="'bar'" size="small" :data="chart6"></common-chart>
        </div>
      </div>
      <div class="column">
        <div class="column-row">
          <common-chart :chart-type="'bar'" size="small" :data="chart4"></common-chart>
        </div>
        <div class="column-row">
          <common-chart :chart-type="'bar'" size="small" :data="chart2"></common-chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/views/pages/components/PageHeader'
import CommonChart from '@/views/pages/components/CommonChart'
import portal from '@/api/portal'
export default {
  name: 'HomePage',
  data () {
    return {
      chart1: {
        name: '智慧后勤',
        routeName: 'SmartLogistics',
        xAxis: [],
        seriesData: []
      },
      chart2: {
        name: '智慧餐饮',
        routeName: 'SmartCatering',
        xAxis: [],
        series: []
      },
      chart3: {
        name: '能源管理',
        routeName: 'EnergyManagement',
        xAxis: [],
        series: []
      },
      chart4: {
        name: '校园规划',
        routeName: 'CampusPlanning',
        xAxis: [],
        series: []
      },
      chart5: {
        name: '智慧楼宇',
        routeName: 'SmartBuilding',
        series: [],
        tooltip: []
      },
      chart6: {
        name: '人员信息',
        routeName: 'PersonInformation',
        xAxis: [],
        series: []
      }
    }
  },
  components: {
    PageHeader,
    CommonChart
  },
  created () {
    this.getBxChart()
    this.getChart2()
    this.getChart3()
    this.getChart4()
    this.getChart5()
    this.getChart6()
  },
  mounted () {
  },
  methods: {
    async getBxChart () {
      const params = {
        month_date: this.$moment().format('2022-08')
      }
      const res = await portal.bxChartMonth(params)
      if (res.data) {
        const data = res.data
        this.chart1.title = '2022年8月维修数据'
        this.chart1.xAxis = [
          { data: ['土木', '电', '设备', '水', '房屋漏水', '卡机', '供暖'] }
        ]
        this.chart1.series = [{
          type: 'bar',
          barWidth: '40%',
          color: '#fff',
          label: {
            show: true,
            position: 'top',
            textStyle: { color: '#fff', fontStyle: 'oblique' }
          },
          data: [data.tmCount, data.dCount, data.sbCount, data.sCount, data.fwlsCount, data.kjCount, data.gnCount]
        }]
      }
    },
    async getChart2 () {
      this.chart2.title = '最受欢迎菜品排行'
      this.chart2.xAxis = [
        { data: ['鸡蛋牛肉面', '黑椒牛肉面', '土豆肥牛', '爆浆排骨肉盖浇饭', '红烧茄子盖浇饭'] }
      ]
      this.chart2.series = [{
        type: 'bar',
        barWidth: '20%',
        color: '#02BBFF',
        label: {
          show: true,
          position: 'right',
          textStyle: { color: '#fff', fontStyle: 'oblique' }
        },
        data: [500, 480, 460, 350, 300, 250, 230]
      }]
    },
    async getChart3 () {
      const params = {
        type: 2
      }
      const res = await portal.getChartEnergyCapacity(params)
      if (res.data) {
        const records = res.data
        const xAxisData = []
        records.forEach((e, index) => {
          if (!index) {
            for (const c in e.data) {
              if (c.indexOf('20') === 0) {
                xAxisData.push(c)
              }
            }
          }
        })
        xAxisData.sort()
        const series = []
        records.forEach(item => {
          series.push(
            {
              type: 'bar',
              name: item.xq,
              barWidth: '20%',
              label: {
                show: true,
                position: 'top',
                textStyle: { color: '#fff', fontSize: 8, fontStyle: 'oblique' }
              },
              data: xAxisData.map(key => item.data[key])
            }
          )
        })
        this.chart3.title = '用电量同比'
        this.chart3.series = series
        this.chart3.xAxis = [
          { data: xAxisData }
        ]
      }
    },
    async getChart4 () {
      this.chart4.title = '已建总建筑面积（万平方米）'
      this.chart4.xAxis = [
        { data: ['中关村', '良乡校区', '西山试验区'] }
      ]
      this.chart4.series = [{
        type: 'bar',
        barWidth: '50%',
        color: '#02BBFF',
        label: {
          show: true,
          position: 'right',
          textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
        },
        data: [114.34, 69.77, 5.54]
      }]
    },
    async getChart5 () {
      this.chart5.title = '中心教学楼建筑各单位组成'
      this.chart5.series = [
        {
          name: '维修类别',
          type: 'pie',
          radius: ['30%', '50%'],
          center: ['50%', '60%'],
          tooltip: {
            trigger: 'item',
            formatter: '{b}:{c}\n({d}%)'
          },
          label: {
            show: true,
            textStyle: { color: '#fff', fontSize: 12, fontStyle: 'oblique' },
            formatter: '{b}:{c}\n({d}%)'
          },
          data: [
            { value: 1048, name: '机关', itemStyle: { color: '#FF8955' } }, { value: 735, name: '网安学院', itemStyle: { color: '#FFD200' } },
            { value: 580, name: '计算机学院', itemStyle: { color: '#EB811A' } }, { value: 484, name: '物理学院', itemStyle: { color: '#FF5454' } },
            { value: 300, name: '数学学院', itemStyle: { color: '#0120EB' } }
          ]
        }
      ]
    },
    async getChart6 () {
      this.chart6.title = '中关村楼宇扫码最多排行'
      this.chart6.xAxis = [
        { data: ['新食堂', '京工餐厅', '3号教学楼', '8号教学楼', '中心教学楼', '研究生教学楼', '信息科学实验楼', '宇航楼'] }
      ]
      this.chart6.series = [{
        type: 'bar',
        barWidth: '40%',
        color: '#02BBFF',
        label: {
          show: true,
          position: 'top',
          textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
        },
        data: [4788, 2252, 2185, 1918, 1789, 1696, 1192, 1089]
      }]
    }
  }
}
</script>

<style scoped lang="scss">
.big-page {
}

</style>
